<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for用法</title>
  <style>
    table{
      text-align: center;
    }
    .first{
      height: 35px;
      background-color: lightyellow;
      color:blue;
    }
    a{
      text-decoration: none;
    }
    a:hover{
      color:red;
      text-decoration: underline;
    }
  </style>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="d1">
    <h1 style="text-align: center;">商品管理系统Vue2.0<hr style="height:2px;" color="#ddd"></h1>
    <table align="center" border="3" cellspacing="0"
           bordercolor="#aaa" width="1000px" rules="rows" >
      <tr align="left" bgcolor="#ffc0cb" height="40px" >
        <td colspan="6" style="padding-left:5px;">
          <!--功能：根据价格区间和商品名称进行筛选-->
          <form action="">
            {{productSearch}} <br>
          <input type="text" placeholder="商品关键字" v-model="productSearch.pname">
          <input type="text" placeholder="价格起始区间" v-model="productSearch.price1">
          <input type="text" placeholder="价格结束区间" v-model="productSearch.price2">
          <input type="button" value="开始查询" @click="searchProduct">
          </form>
        </td>
      </tr>
      <tr class="first">
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>商品数量</td>
        <td>小计(￥)</td>
        <td>操作</td>
      </tr>
      <tr v-for="p in products" :key="p.pid" height="30px">
        <td>{{p.pid}}</td>
        <td>{{p.pname}}</td>
        <td>{{p.price}}</td>
        <td>{{p.num}}</td>
        <td>{{p.price * p.num}}</td>
        <td>
          <a href="javascript:;" >修改</a>
          <a href="javascript:;" @click="deleteProduct(p.pid)">删除</a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    el: '.d1',
    data:{
      products: [],
      productSearch:{price1:1,price2:20000},     // 要查询的商品信息
    },
    // vue对象创建完成自动调用（生命周期函数），在此生命周期函数调用后端代码
    created(){
      this.init()
    },
    methods:{
      // 0. 初始化函数
      init(){
        this.products = [
          {"pid":1001,"pname":"飘柔洗发水","price":40,"num":20},
          {"pid":1002,"pname":"ThinkPad X1电脑","price":12000,"num":5},
          {"pid":1003,"pname":"格力空调","price":5000,"num":12},
          {"pid":1004,"pname":"小米手机","price":3500,"num":15},
          {"pid":1005,"pname":"七匹狼外套","price":1200,"num":10},
          {"pid":1006,"pname":"华为电脑","price":10000,"num":6},
          {"pid":1007,"pname":"联想电脑","price":8000,"num":10},
          {"pid":1008,"pname":"HP电脑","price":8500,"num":9},
          {"pid":1009,"pname":"ViVO手机","price":2800,"num":8},
          {"pid":1010,"pname":"美的空调","price":4300,"num":25},
        ]
      },
      // 1. 搜索商品
      searchProduct(){
        // 1.0 恢复原来所有商品的数据
        this.init()
        // 1.1 根据过滤条件查询商品列表
        // ① 定义数组存放查询到的数据
        let productList = []
        // ② 开始查询
        this.products.forEach(p => {
          if (p.pname.includes(this.productSearch.pname) &&
            (p.price >= this.productSearch.price1 && p.price <= this.productSearch.price2)){
            productList.push(p)
          }
        })
        console.log(productList)
        this.products = productList
      },
      // 2. 删除商品
      deleteProduct(pid){
        // 2.1 根据商品id查找出商品在原数组中的下标
        // 方法一：(findIndex: es6提供的方法)
        // let index = this.products.findIndex(p => p.pid === pid)
        // 方法二：(indexOf: 原来的方法)
        let index = this.products.indexOf(pid)
        console.log("index:",index)
        // 2.2 再删除商品
        if (confirm(`你真的要删除编号为${pid}的商品吗?`)){
          this.products.splice(index,1)     // 参数1：要删除的元素在数组中的下标 参数2：删除的个数
        }
      }
    }
  })
</script>
